<template>

  <v-content style="background-color:#f5f5f5;bottom:0.50rem;">
    <div class="mw-column-style" >
      <div style="width:3.75rem;height:2.31rem;position:relative">
        <img style="width:3.75rem;height:2.31rem;position:absolute;top:0;left:0" src="/static/profile_top.png"/>
        <div class="mw-row-spacebetween-style" style="align-items:center;width:3.35rem;position:absolute;bottom:0.87rem;left:0.2rem">
          <div v-if="data.profile == ''" @click="data.skipToLogin()" class="mw-row-style" style="align-items:center">
            <img style="width:0.68rem;height:0.68rem;margin-right:0.1rem;object-fit: cover" src="/static/defalut_avatar.png"/>
            <div class="mw-main-black" style="font-size: 0.2rem;font-weight: bold">登录/注册</div>
          </div>
          <div @click="data.skipToUserpage" class="mw-row-style" style="align-items:center" v-else>
            <img style="width:0.68rem;height:0.68rem;border-radius:0.34rem;margin-right:0.1rem;object-fit: cover" :src="data.profile.avatar == '' ? '/static/defalut_avatar.png': data.profile.avatar"/>
            <div class="mw-column-style">
              <div class="mw-row-style" style="align-items: center;margin-bottom: 0.08rem">
                <div class="mw-first-text-color mw-single-line" style="font-size: 0.2rem;font-weight: bold;">{{data.profile.name}}</div>
                <!--<img style="width:0.24rem;height:0.24rem;" src="/static/edit_profile_enter.png"/>-->
              </div>
              <div class="mw-single-line" style="font-size: 0.13rem;color:rgba(0,0,0,0.4)">{{data.profile.introduce}}</div>
            </div>
          </div>

        </div>
        <div class="mw-row-style" style="align-items:center;position:absolute;bottom:0.3rem;left:0.2rem">
          <div class="mw-column-style" style="margin-right: 0.28rem">
            <div @click="data.skipToFansfollowslist(0)" class="mw-first-text-color" style="font-size: 0.14rem;margin-bottom: 0.12rem">{{data.profile.follows_total}}</div>
            <div style="font-size: 0.11rem;color:rgba(0,0,0,0.4)">关注</div>
          </div>
          <div  class="mw-column-style">
            <div @click="data.skipToFansfollowslist(1)" class="mw-first-text-color" style="font-size: 0.14rem;margin-bottom: 0.12rem">{{data.profile.fans_total}}</div>
            <div style="font-size: 0.11rem;color:rgba(0,0,0,0.4)">粉丝</div>
          </div>
        </div>
      </div>
      <div class="mw-column-style" style="width:3.35rem;padding:0 0.2rem;margin-top:-0.1rem;z-index:2;">
        <div class="mw-row-style mw-main-background-white" style="width: 100%;height:0.68rem;border-radius: 0.08rem;align-items: center">
          <div class="mw-first-text-color" style="width: 0.83rem;text-align: center;font-size: 0.15rem;font-weight: bold">特惠</div>
          <div class="mw-vertical-divider" style="height:0.34rem"></div>
          <div @click="skipToProfileSale(0)"  class="mw-column-center-style" style="width: 0.84rem;">
            <img src="/static/profile_sale.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">爆料·{{data.profile.discounts_total}}</div>
          </div>
          <div @click="skipToProfileSale(1)" class="mw-column-center-style" style="width: 0.84rem;">
            <img src="/static/profile_qiang.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">已抢·{{data.profile.discounts_picks_total}}</div>
          </div>
          <div @click="skipToProfileSale(2)" class="mw-column-center-style" style="width: 0.83rem;">
            <img src="/static/profile_collected.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">收藏·{{data.profile.discounts_collected_total}}</div>
          </div>
        </div>
        <div class="mw-row-style mw-main-background-white" style="margin-top:0.1rem;width: 100%;height:0.68rem;border-radius: 0.08rem;align-items: center">
          <div class="mw-first-text-color" style="width: 0.83rem;text-align: center;font-size: 0.15rem;font-weight: bold">文章</div>
          <div class="mw-vertical-divider" style="height:0.34rem"></div>
          <div @click="skipToProfileArticle(0)" class="mw-column-center-style" style="width: 0.84rem;">
            <img src="/static/profile_article.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">发布·{{data.profile.articles_total}}</div>
          </div>
          <div @click="skipToProfileArticle(1)" class="mw-column-center-style" style="width: 0.84rem;">
            <img src="/static/profile_like.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">喜欢·{{data.profile.articles_liked_total}}</div>
          </div>
          <div @click="skipToProfileArticle(2)" class="mw-column-center-style" style="width: 0.83rem;">
            <img src="/static/profile_collected.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">收藏·{{data.profile.articles_collected_total}}</div>
          </div>
        </div>
        <div class="mw-row-style mw-main-background-white" style="margin-top:0.1rem;width: 100%;height:0.68rem;border-radius: 0.08rem;align-items: center">
          <div class="mw-first-text-color" style="width: 0.83rem;text-align: center;font-size: 0.15rem;font-weight: bold">笔记</div>
          <div class="mw-vertical-divider" style="height:0.34rem"></div>
          <div @click="skipToProfileNote(0)" class="mw-column-center-style" style="width: 0.84rem;">
            <img src="/static/profile_article.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">发布·{{data.profile.notes_total}}</div>
          </div>
          <div @click="skipToProfileNote(1)" class="mw-column-center-style" style="width: 0.84rem;">
            <img src="/static/profile_like.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">喜欢·{{data.profile.notes_liked_total}}</div>
          </div>
          <div @click="skipToProfileNote(2)" class="mw-column-center-style" style="width: 0.83rem;">
            <img src="/static/profile_collected.png" style="width: 0.24rem;height:0.24rem;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;line-height: 0.16rem;margin-top:0.04rem;">收藏·{{data.profile.notes_collected_total}}</div>
          </div>
        </div>
        <div class="mw-column-style mw-main-background-white" style="margin-top:0.1rem;width: 3.05rem;padding:0.15rem;border-radius: 0.08rem;">
          <div class="mw-first-text-color" style="font-size: 0.15rem;font-weight: bold;margin-bottom: 0.15rem">商城</div>
          <div @click="skipToOrders" class="mw-row-spacebetween-style" style="align-items: center;width: 100%;margin-bottom:0.15rem">
            <div class="mw-row-style" style="align-items: center">
              <img src="/static/profile_order.png" style="width: 0.24rem;height:0.24rem;margin-right:0.12rem"/>
              <div class="mw-first-text-color" style="font-size:0.15rem">我的订单</div>
            </div>
            <img src="/static/order_confirm_address_more.png" style="height:0.1rem;width:0.05rem"/>
          </div>
          <div @click="skipToGoodsCollects" class="mw-row-spacebetween-style" style="align-items: center;width: 100%;margin-bottom:0.15rem">
            <div class="mw-row-style" style="align-items: center">
              <img src="/static/profile_shop_collect.png" style="width: 0.24rem;height:0.24rem;margin-right:0.12rem"/>
              <div class="mw-first-text-color" style="font-size:0.15rem">我收藏的商品</div>
            </div>
            <img src="/static/order_confirm_address_more.png" style="height:0.1rem;width:0.05rem"/>
          </div>
          <div @click="skipToAddressList" class="mw-row-spacebetween-style" style="align-items: center;width: 100%;">
            <div class="mw-row-style" style="align-items: center">
              <img src="/static/profile_address.png" style="width: 0.24rem;height:0.24rem;margin-right:0.12rem"/>
              <div class="mw-first-text-color" style="font-size:0.15rem">地址管理</div>
            </div>
            <img src="/static/order_confirm_address_more.png" style="height:0.1rem;width:0.05rem"/>
          </div>
        </div>
        <div class="mw-column-style mw-main-background-white" style="margin-top:0.1rem;width: 3.05rem;padding:0.15rem;border-radius: 0.08rem;">
          <div @click="skipToAbout" class="mw-row-spacebetween-style" style="align-items: center;width: 100%;margin-bottom:0.15rem">
            <div class="mw-row-style" style="align-items: center">
              <img src="/static/about_miaohui.png" style="width: 0.24rem;height:0.24rem;margin-right:0.12rem"/>
              <div class="mw-first-text-color" style="font-size:0.15rem">关于妙汇</div>
            </div>
            <img src="/static/order_confirm_address_more.png" style="height:0.1rem;width:0.05rem"/>
          </div>
          <div @click="skipToDownload" class="mw-row-spacebetween-style" style="align-items: center;width: 100%;margin-bottom:0.15rem">
            <div class="mw-row-style" style="align-items: center">
              <img src="/static/share_miaohui.png" style="width: 0.24rem;height:0.24rem;margin-right:0.12rem"/>
              <div class="mw-first-text-color" style="font-size:0.15rem">推荐妙汇给朋友</div>
            </div>
            <img src="/static/order_confirm_address_more.png" style="height:0.1rem;width:0.05rem"/>
          </div>
          <div @click="clear" class="mw-row-spacebetween-style" style="align-items: center;width: 100%;">
            <div class="mw-row-style" style="align-items: center">
              <img src="/static/clear_miaohui.png" style="width: 0.24rem;height:0.24rem;margin-right:0.12rem"/>
              <div class="mw-first-text-color" style="font-size:0.15rem">清除缓存</div>
            </div>
            <img src="/static/order_confirm_address_more.png" style="height:0.1rem;width:0.05rem"/>
          </div>
        </div>
        <div v-if="data.profile != ''" @click="data.exitLogin" class="mw-column-style mw-main-background-white"
             style="align-items:center;justify-content:center;margin-top:0.27rem;margin-bottom:0.1rem;width: 3.05rem;padding:0.15rem;border-radius: 0.08rem;color: #5789C2;font-size: 0.15rem">
          退出登陆
        </div>
      </div>
    </div>
  </v-content>

</template>

<script>
  import { mapModules, mapRules } from 'vuet'
  export default {
    mixins: [
      mapModules({ data: 'profile'}),
      mapRules({ route: 'profile' })
    ],
    methods:{
      skipToAbout(){
        this.$pushRouteByJson({name: 'about'})
      },
      skipToDownload() {
        this.$pushRouteByJson({name: 'downloadpage'})
      },
      skipToOrders() {
        if (this.$getLoginStatus()) {
          this.$pushRouteByJson({name: 'orderlist', query: {id: 0}})
        } else {
          this.$pushRouteByJson({name:"login"})
        }
      },
      skipToGoodsCollects(){
        if (this.$getLoginStatus()) {
          this.$pushRouteByJson({name: 'goodscollects'})
        } else {
          this.$pushRouteByJson({name:"login"})
        }
      },
      skipToAddressList(){
        if (this.$getLoginStatus()) {
          this.$pushRouteByJson({name: 'addresslist'})
        } else {
          this.$pushRouteByJson({name:"login"})
        }
      },
      skipToProfileArticle(id) {
        var that = this
        if (this.$getLoginStatus()) {
          this.$pushRouteByJson({name: 'profilearticle', query: {id: id}})
        } else {
          this.$pushRouteByJson({name:"login"})
        }

      },
      skipToProfileNote(id) {
        var that = this
        if (this.$getLoginStatus()) {
          this.$pushRouteByJson({name: 'profilenote', query: {id: id}})
        } else {
          this.$pushRouteByJson({name:"login"})
        }

      },
      skipToProfileSale(id) {
        var that = this
        if (this.$getLoginStatus()) {
          this.$pushRouteByJson({name: 'profilesale', query: {id: id}})
        } else {
          this.$pushRouteByJson({name:"login"})
        }

      },
      clear(){
          localStorage.clear();
          this.data.profile = "";
          this.data.fetch();
      }
    },
    data () {
      return {

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
